<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>个人主页</title>
    <link href="css/owl.carousel.css" rel="stylesheet"/>
    <link href="css/owl.transitions.css" rel="stylesheet"/>
    <link href="css/owl.theme.css" rel="stylesheet"/>
    <link href="css/font-awesome.min.css" rel="stylesheet"/>
    <link href="css/main.css" rel="stylesheet"/>
    
</head>
<body>
<!-- ￥导航 -->
<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container-fluid">
	    <div class="navbar-header">
	      	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
	     	</button>
	        <a href="index.html"><img src="img/logo.png"></a>
	    </div>
	    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	      	<ul class="nav navbar-nav navbar-right">
		        <li class="text-center"><a href="index.html">首页</a></li>
		        <li class="text-center"><a href="resume.html">个人简介</a></li>
		        <li class="text-center"><a href="portfolio.html">项目案例</a></li>
		        <li class="text-center"><a href="contact.html">联系方式</a></li>
	      	</ul>
	    </div>
	</div>
</nav>
<!-- ￥banner -->
<section class="banner">
    <div id="owl-demo" class="owl-carousel owl-theme">
        <div class="item">
            <div class="mask"></div>
            <div class="title">
                <h3>Angular</h3>
                <h5>简洁、直观、强悍的前端开发框架，迅速开发出多终端适配的网站.</h5>
            </div>
        </div>
        <div class="item">
            <div class="mask"></div>
        </div>
        <div class="item">
            <div class="mask"></div>
            <div class="title">
                <h3>javascript</h3>
                <h5>基于对象和事件驱动的解释性、松散型语言.</h5>
            </div>
        </div>
    </div>
</section>
<!-- ￥news -->
<section class="introduce">
    <h1 class="text-center title">自我介绍</h1>
        <div class="container">
          <!--   <div class="row">
                <div class="com-xs-12 text-center">
                    <img class="img-responsive" src="img/my.jpg" width="180">
                </div>
            </div> -->
            <div class="row">
                <div class="col-sm-offset-2 col-sm-8 text-center">
                    <h4>你好,我叫任志琴,我是一名前端工程师<br>我精通响应式设计、html5、css3、js,掌握angular等多种前端框架...</h4>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-6 text-right">
                    <a class="a-link text-center" href="resume.html">个人简介</a>
                </div>
                <div class="col-xs-6 text-left">
                    <a class="a-link text-center" href="portfolio.html">项目作品</a>
                </div>
            </div>
        </div>
</section>
<!-- ￥about -->
<section id="service">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3">
                <div class="mask-item text-center">
                    <div class="idea-icon"><i class="fa fa-lightbulb-o fa-4x"></i> </div>
                    <h3>想法</h3>
                    <p>源于自然，源于标准，剖析行业本质，解决客户需求点</p>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="mask-item text-center">
                    <div class="idea-icon"><i class="fa fa-pencil-square-o fa-4x"></i> </div>
                    <h3>计划</h3>
                    <p>自我学习前端新技术，紧随时代潮流，永不服输</p>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="mask-item text-center">
                    <div class="idea-icon"><i class="fa fa-code fa-4x"></i> </div>
                    <h3>开发</h3>
                    <p>less编写css，用bootstrap框架搭建响应式网站，基于phpcms制作整站</p>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="mask-item text-center">
                    <div class="idea-icon"><i class="fa fa-jsfiddle fa-4x"></i> </div>
                    <h3>状态</h3>
                    <p>高效的行动力，服从领导安排</p>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- ￥project -->
<section class="project">
    <div class="container">
        <div class="row text-center">
            <div class="col-sm-12">
                <h1 class="title">作品展示</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 text-center">
                <h4 style="margin-bottom: 50px;">响应式网站，html5小应用，小游戏...</h4>
            </div>
        </div>
        <div class="row mar-bot40">
<!--             <div class="col-md-3 col-xs-6 thumb">
                <a href="javascript:;">
                    <div class="thumb-wrap">
                        <div class="over-hid rel">
                            <div class="mask"><i class="fa fa-link fa-3x"></i></div>
                            <img class="img-responsive" src="img/zp/huiying.png" height="400" width="400"/>
                        </div>
                        <div class="describe text-center">惠影科技传媒股份有限公司</div>
                    </div>
                </a>
            </div>
            <div class="col-md-3 col-xs-6 thumb">
                <a href="http://localhost/phpcms3/index.html">
                    <div class="thumb-wrap">
                        <div class="over-hid rel">
                            <div class="mask"><i class="fa fa-link fa-3x"></i></div>
                            <img class="img-responsive" src="img/zp/4444.png" height="400" width="400"/>
                        </div>
                        <div class="describe text-center">太原健体武术学校</div>
                    </div>
                </a>
            </div> -->
            <div class="col-md-3 col-xs-6 thumb">
                <a href="https://tenkiss258.github.io/TypingGame/">
                    <div class="thumb-wrap">
                        <div class="over-hid rel">
                            <div class="mask"><i class="fa fa-link fa-3x"></i></div>
                            <img class="img-responsive" src="img/zp/dazi.png" height="400" width="400"/>
                        </div>
                        <div class="describe text-center">打字小游戏</div>
                    </div>
                </a>
            </div>
            <div class="col-md-3 col-xs-6 thumb">
                <a href="https://tenkiss258.github.io/apple/">
                    <div class="thumb-wrap">
                        <div class="over-hid rel">
                            <div class="mask"><i class="fa fa-link fa-3x"></i></div>
                            <img class="img-responsive" src="img/zp/apple.jpg" height="400" width="400"/>
                        </div>
                        <div class="describe text-center">响应式</div>
                    </div>
                </a>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 text-center"><a class="a-link" href="portfolio.html">查看更多</a></div>
        </div>
    </div>
</section>
<!-- ￥底部 -->
<footer>
    <div class="container">
        <div class="row text-center">
           
            <div class="rel" style="display: inline-block;">
                <a href="##">
                    <i class="fa fa-qq fa-2x"></i>
                    <div class="tap">
                        <img src="img/qq.jpg "style="width: 110px;height:110px;">
                    </div>
                </a>
            </div>
            <a href="##"><i class="fa fa-weibo fa-2x"></i></a>
            <div class="rel" style="display: inline-block;">
                <a href="##">
                    <i class="fa fa-weixin fa-2x"></i>
                    <div class="tip">
                        <img src="img/weixin.png "style="width: 110px;height:110px;">
                    </div>
                </a>
            </div>
        </div>
        <div class="row text-center">
            <div class="col-md-2 col-md-offset-2">电话：13327518050</div>
            <div class="col-lg-4 col-md-4">地址：天河区棠东</div>
            <div class="col-lg-3 col-md-3">邮箱：13327518050@189.cn</div>
        </div>
    </div>
</footer>
<script src="js/jquery.min.js"></script>
<script src="js/owl.carousel.min.js"></script>

<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/isotope.pkgd.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
